<template>
<body id="login">
  <el-form class="login-container" label-position="left" label-width="0px">
    <h3 class="login_title">智慧管院系统登录</h3>
    <el-form-item>
      <el-input class="login_input" type="text" v-model="username" placeholder="账号"></el-input>
    </el-form-item>

    <el-form-item>
      <el-input class="login_input" type="password" v-model="password" placeholder="密码"></el-input>
    </el-form-item>

    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;margin-top:20px;border: none" @click.native.prevent="login">登录</el-button>
    </el-form-item>
  </el-form>
</body>
</template>

<script>
import axios from 'axios'
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      userId: "",
      responseResult: []
    };
  },

  mounted() {
    this.getCookie();
  },

  methods: {
    login(){
      // this.$router.push("/editor");
      this.$axios({
        method: "post",
        url: "/tips/users/upLogin",
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        },
        data: {
          username: this.username,
          password: this.password
        }
      })
      .then(res => {
          //请求成功后执行函数
          if (res.data.code === 0) {
            this.$router.push("/editor"); //登录验证成功路由实现跳转
            this.$notify({
              title: "提示",
              message: "用户登录成功",
              duration: 1000,
              type:"success"
            });
            localStorage.setItem("u_name",res.data.data.username)
            localStorage.setItem("u_id",res.data.data.userId)
          } else {
            this.$notify({
              title: "提示",
              message: "用户登录失败",
              duration: 1000,
              type:"warning"
            });
          }
        })
      .catch(err => {
          //请求错误后执行函数
          this.$notify.error({
            title: "提示",
            message: "用户访问错误",
            duration: 1000
          });
          console.log(err);
        });
    },

    //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie =
        "password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
    },

    //读取cookie 记住密码
    getCookie() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); //再次切割
          //判断查找相对应的值
          if (arr2[0] == "username") {
            this.username = arr2[1]; //保存到保存数据的地方
          } else if (arr2[0] == "password") {
            this.password = arr2[1];
          }
        }
      }
    },

    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
    },

    // login() {
    //     this.$axios
    //         .post('/login', {
    //             username: this.loginForm.username,
    //             password: this.loginForm.password
    //         })
    //         .then(successResponse => {
    //             if (successResponse.data.code === 200) {
    //                 this.$router.replace({path: '/index'})
    //             }
    //         })
    //         .catch(failResponse => {
    //         })
    // }
  }
};
</script>
 
<style>
#login {
  background: url("/images/img2.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body {
  margin: 0px;
  padding: 0;
}

.login-container {
  width: 350px;
  height: 250px;
  padding: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -200px;
  background-color: rgba(240, 255, 255, 0.5);
  border-radius: 10px;
  text-align: center;
}

.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
